<template>
  <div class="app-container">

    <h1>答辩列表</h1>
    <el-divider/>

    <el-form :inline="true" :model="replyInfoPageRequest" class="demo-form-inline" size="small">
      <el-form-item label="类型">
        <el-select v-model="replyInfoPageRequest.status" placeholder="请选择学生答辩状态">
          <el-option label="全部" value="-1"/>
          <el-option label="答辩中" value="1"/>
          <el-option label="排队中" value="2"/>
          <el-option label="已结束" value="3"/>
          <el-option label="未报名" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStudentList">查询</el-button>
      </el-form-item>
      <el-form-item v-if="anFlag">
        <el-popconfirm
          title="确定提醒未预约的学生么？"
          @confirm="submitRemind"
        >
          <el-button slot="reference" type="success">提醒答辩</el-button>
        </el-popconfirm>
      </el-form-item>
      <el-form-item>
        <router-link
          :inline="true"
          :to="{
            path: '/teacher/analyse',
            query: {
              replyId: this.$route.query.replyId
            }
          }"
          class="inlineBlock">
          <el-button v-if="reply.visible === 1" type="primary">答辩分析</el-button>
        </router-link>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="studentName"
        fixed="left"
        label="姓名"/>
      <el-table-column
        prop="studentNoId"
        label="学号"/>
      <el-table-column
        :formatter="handleStatus"
        prop="status"
        label="状态"/>
      <el-table-column
        prop="score"
        label="成绩"/>
      <el-table-column
        fixed="right"
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-popconfirm
            v-if="scope.row.status === '1'"
            title="确定结束答辩并推送评分么？"
            icon-color="red"
            icon="el-icon-info"
            @confirm="submitOver(scope.row.studentId)"
          >
            <el-button slot="reference" type="warning" size="mini">
              结束答辩
            </el-button>
          </el-popconfirm>
          <el-button
            v-if="scope.row.status === '2'"
            type="success"
            size="mini"
            @click="submitBegin(scope.row.studentId)">
            开始答辩
          </el-button>
          <el-button
            v-if="scope.row.status === '3'"
            type="primary"
            size="mini"
            @click="getScoreInfo(scope.row.studentId)">
            查看详情
          </el-button>
          <el-button
            v-if="scope.row.status === '4'"
            disabled
            type="success"
            size="mini"
            title="学生尚未报名">开始答辩
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <br>

    <div class="block">
      <el-pagination
        v-if="!isMobile"
        :current-page="page"
        :page-sizes="[5, 10, 15, 30, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changSize"
        @current-change="changePage"/>
      <el-pagination
        v-else
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        small
        layout="prev, pager, next"
        @current-change="changePage"/>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="gradeFlag"
      :width="isMobile ? '80%' : '50%'"
      title="详细信息">
      <el-table :data="grade">
        <el-table-column
          :formatter="handleName"
          prop="markId"
          label="评分人"/>
        <el-table-column prop="score" label="分数"/>
      </el-table>
      <br>
      <span v-text="tip"/>
      <div slot="footer" class="dialog-footer">
        <router-link
          :inline="true"
          :to="{
            path: '/teacher/analyse',
            query: {
              replyId: this.$route.query.replyId,
              studentId: studentId
            }
          }"
          class="inlineBlock">
          <el-button v-if="reply.visible === 1" type="primary">成绩分析</el-button>
        </router-link>
        <el-button type="info" @click="gradeFlag = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import teacherReplyApi from '@/api/teacher/reply'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: 1,
      total: 0,
      pageSize: 10,
      LabelWidth: '80px',
      isMobile: false,

      replyInfoPageRequest: {
        page: 1,
        limit: 10,
        status: '-1'
      },

      reply: {
        groupId: null,
        weight: 0,
        visible: 0
      },
      anFlag: false,
      groupNums: [],

      gradeFlag: false,
      grade: null,
      tip: '',
      studentId: ''
    }
  },
  created() {
    this.isMobile = document.body.clientWidth <= 576
    this.getStudentList()
  },
  methods: {
    getStudentList() {
      this.listLoading = true
      this.replyInfoPageRequest.page = this.page
      this.replyInfoPageRequest.limit = this.pageSize
      teacherReplyApi.getListById(this.$route.query.replyId, this.replyInfoPageRequest).then(res => {
        this.listLoading = false
        this.total = Number.parseInt(res.result.counts)
        this.list = res.result.items
        this.prepare()
      }).catch(error => {
        console.log(1, error)
      })
    },
    prepare() {
      teacherReplyApi.getReplyById(this.$route.query.replyId).then(res => {
        this.reply = res.result
        teacherReplyApi.getGroupById(this.reply.groupId).then(res => {
          this.groupNums = res.result.members
          this.anFlag = true
        }).catch(error => {
          console.log(error)
        })
      }).catch(error => {
        console.log(error)
      })
    },
    changSize(pageSize) {
      this.pageSize = pageSize
      this.getStudentList()
    },
    changePage(page) {
      this.page = page
      this.getStudentList()
    },
    handleStatus(student) {
      if (student.status === '1') {
        return '答辩中'
      } else if (student.status === '2') {
        return '排队中'
      } else if (student.status === '3') {
        return '已结束'
      } else {
        return '未报名'
      }
    },
    submitRemind() {
      teacherReplyApi.remindInline(this.$route.query.replyId).then(res => {
        this.$message({
          message: res.result,
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
      })
    },
    submitBegin(id) {
      teacherReplyApi.beginReply(this.$route.query.replyId, id).then(res => {
        this.$message({
          message: res.result,
          type: 'success'
        })
        this.getStudentList()
      }).catch(error => {
        console.log(error)
      })
    },
    submitOver(id) {
      teacherReplyApi.pushMark(this.$route.query.replyId, id).then(res => {
        this.$message({
          message: res.result,
          type: 'success'
        })
        this.getStudentList()
      }).catch(error => {
        console.log(error)
      })
    },
    getScoreInfo(id) {
      this.studentId = id
      const stu = this.list.find((stu) => {
        return stu.studentId === id
      })
      this.tip = stu.studentName + '的总成绩为' + stu.score + '，其中学生匿名打分成绩占比' + this.reply.weight + '%'
      teacherReplyApi.getScoreById(this.$route.query.replyId, id).then(res => {
        this.grade = res.result
        this.gradeFlag = true
      }).catch(error => {
        console.log(error)
      })
    },
    handleName(data) {
      if (data.markId === '0') {
        return '匿名'
      }
      return this.groupNums.find((num) => {
        return num.id === data.markId
      }).name
    }
  }
}

</script>
